<template>
    <div id="dispense" >

        <div class="box">
            <div class="til"  >
                无牌车入场
            </div>
            <div class="img">
            </div>
            <div class="parkName">
                国际体育文化演艺中心停车场
            </div>
        </div>

        <div class="btnContent" v-show="!isSuccess">
            <a class="openBtn" @click="inClick">开闸</a>
        </div>

    </div>
</template>

<script>
    import Vue from 'vue'
    import {NavBar, Toast, Dialog, Icon, Loading} from 'vant';
    import "./css/parking.css";
    import Cookies from 'js-cookie'
    Vue.use(Loading);
    export default {
        name: 'Dispense',
        data() {
            return {
                isActive: false,
                openid: "",
                isSuccess: false,
            }
        },
        watch: {

        },
        mounted() {
            document.body.addEventListener('touchstart', function () {
            });
            this.openid = Cookies.get("token")
            if (this.openid == undefined || this.openid == "") {
                return;
            }
        },
        methods: {
            inClick:function () {

                /*获取设备编号*/
                var equipCode = this.$route.query.equipCode;

                const toast = Toast.loading({
                    mask: true,
                    forbidClick: true,
                    message: '开闸中...',
                    duration:0
                });

                this.$api.parking.noneCarnoIn({equipCode: equipCode, userWxOpenId: this.openid})
                    .then((res) => {
                        toast.clear()
                        if (res.code == 0) {
                            this.isSuccess = true;
                            Dialog.alert({
                                message: '已成功开闸，请尽快入场'
                            }).then(() => {
                                // on close
                                //跳转到支付界面
                                this.$router.push({path: "/parking_pay"})

                            });
                        } else {
                            this.isSuccess = false;
                            Dialog.alert({
                                message: res.msg
                            }).then(() => {
                                // on close
                            });
                        }

                    })
                    .catch(function (error) {
                        toast.clear()
                        console.log(error);
                })
            }

        }
    }
</script>

<style lang="less"  >


    .dispense {
        height: 100%;

    }

    .box {
        height: 100%;
        width: 90%;
        margin: 20px auto;
        border-radius: 5px;
        border:2px solid #3c8dd6;
    }


    .til{
        font-size: 1.6rem;
        text-align: left;
        color: #FFFFFF;
        padding: 0.5rem 0 0.5rem 1rem;
        height: 100%;
        background-color: #3c8dd6;
    }
    .img{
        background: url(./img/parkBg.jpg) no-repeat;
        background-size: 100%;
        height:25rem;
    }
    .parkName{
        padding: 1rem 0 1.5rem 0;
        text-align: center;
        font-size: 1.6rem;
        color: #000000;
        /*background: url(./img/parkSpace.png) center 22% no-repeat;*/
        /*background-size: 50%;*/
    }


    .btnContent{
        height: 100%;
        width: 90%;
        margin: 20px auto;
        text-align: center;
    }
    .openBtn{
        display: block;
        width: 100%;
        line-height: 4rem;
        text-align: center;
        margin: 0 auto;
        color: #ffffff;
        font-size: 1.6rem;
        border-radius: 5px;
        background: #3c8dd6;
    }
 
</style>